
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>注册</title>
<link rel="stylesheet" type="text/css" href="static/css/reset.css" />
<link rel="stylesheet" type="text/css" href="static/css/scanboardLogin.css" />
<link rel="stylesheet" type="text/css" href="static/css/animsition.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style type="text/css"> a:link{color: aqua;}
 a:visited{color: aqua;}
 a:hover{color: aliceblue;}
 a:active{color: blue;}
 </style>

<script type="text/javascript">
        // 检验用户名是否为空
        function checkUsername(){
            var username = document.getElementById("username").value;
			// 去除空白
			var username=username.trim();
			// 获取信息提示框
            var usernameSpan = document.getElementById("usernameSpan");
			// 正则表达式
			var regExp=/^[A-Za-z0-9]+$/;
            if(!username){
				usernameSpan.innerHTML = "<font color='red'>用户名不能为空</font>";
            }
			else if(username.length<6 || username.length>14){
				usernameSpan.innerHTML = "<font color='red'>用户名长度必须在[6-14]位之间</font>";
			}
			else if(!regExp.test(username)){
				usernameSpan.innerHTML = "<font color='red'>用户名只能由数字和字母组成</font>";
			}
            else{
				usernameSpan.innerHTML = "<font color='red'></font>";
            }
        }
        // 检验用户名是否已经被注册,是否符合格式
		$(document).ready(function () {
            $("#username").change(function () {
                username = $("#username").val();
				var sendData = {
                'username':username};
                $.ajax({
                    async:true,
                    url:"/validateUniqueName",
                    type:"post",
					data:sendData,
                    // headers: {"X-CSRFToken":$.cookie("csrftoken")},
                    success: function(data){
                        if(data.data == "True"){
							usernameSpan.innerHTML = "<font color='green'>用户名可以使用</font>";
                        } else{
							usernameSpan.innerHTML = "<font color='red'>用户名不可使用</font>";
                        }
                    },
					error:function(error){
						alert("error")
					}
                });
            });
        });

        /* 检验两次密码输入是否一致 */
        function checkPassword(){
            // 可以首先对该密码进行正则校验,
            var pwd1 = document.getElementById("pwd1").value;
            var pwd2 = document.getElementById("pwd2").value;
			var pwd1_temp =pwd1.trim();
			var pwd2_temp =pwd2.trim();
            if(!pwd1){
				pwd2Span.innerHTML = "<font color='red'>密码不能为空或存在空格</font>";
            }
			else if(!pwd2){
				pwd2Span.innerHTML = "<font color='red'>密码不能为空或存在空格</font>";
			}
			else if(pwd1 != pwd1_temp){
				pwd2Span.innerHTML = "<font color='red'>密码不能为空或存在空格</font>";
			}
			else if(pwd2 != pwd2_temp){
				pwd2Span.innerHTML = "<font color='red'>密码不能为空或存在空格</font>";
			}
			else if(pwd1.length <6 || pwd1.length > 14){
				pwd2Span.innerHTML = "<font color='red'>密码长度为[6-14]</font>";
			}
			else{
                if(pwd1 != pwd2){
					pwd2Span.innerHTML = "<font color='red'>两次密码不一致, 请重新输入</font>";
                }
                else{
					pwd2Span.innerHTML = "<font color='green'>密码一致</font>";
                }

            }
        }

        function makeAble() {
            var username = document.getElementById('username').value;
            var passward = document.getElementById('pwd1').value;
            var passward2 = document.getElementById('pwd2').value;
            var email = document.getElementById('email').value;
            var validateCode = document.getElementById('code').value;
            var registerbtn = document.getElementById("registerbtn")
            if (username.length != 0 && passward.length != 0 && passward2.length != 0 && email.length != 0 && validateCode.length != 0) {
                registerbtn.diabled = false;
                $('#registerbtn').removeAttr("disabled");
            }
        }
</script>

</head>
<body>
	<div class="wp animsition">
		<div class="boardLogin">
			<a href="#" class="logo">
				<img src="static/images/logowu.png">
			</a>
			{% for message in get_flashed_messages() %}
				{{ message }}
			{% endfor %}
			<form method="POST">
				<div class="inpGroup">
					<span class="loginIco1"></span>
					<input type="text" name="username" id="username" placeholder="请输入您的用户名" onkeyup="checkUsername()" autocomplete="off" required>
				</div>
				<div class="prompt">
					<span id="usernameSpan"></span>
				</div>
				
				<div class="inpGroup">
					<span class="loginIco2"></span>
					<input type="password" name="pwd1" id="pwd1" placeholder="请输入您的密码" autocomplete="off">
				</div>
				<div class="prompt">
					<span id="pwd1Span"></span>
				</div>
				<div class="inpGroup">
					<span class="loginIco2"></span>
					<input type="password" name="pwd2" id="pwd2" placeholder="请重复您的密码" onblur="checkPassword()"  autocomplete="off">
				</div>
				<div class="prompt">
					<span id="pwd2Span"></span>
				</div>
				<div class="inpGroup">
					<span class="loginIco4"></span>
					<input type="email" name="email" id="email" placeholder="请输入您的邮箱">
				</div>
				<div class="prompt">
					<input type='button' id="verify" value='发送验证码' onclick="sendmail()" style="color: aliceblue;">
				</div>

				<script>
					// 按钮的倒计时
					var countdown=60;
					function sendmail(){
						var obj =$('#verify');
						settime(obj);
					}
					function settime(obj){
						if(countdown ==0){
							obj.attr('disabled',false);
							obj.val('重新发送验证码');
							countdown =60;
							return;
						}
						else{
							obj.attr('disabled',true);
							obj.val('重新发送('+countdown+'s)');
							countdown--;
						}
						setTimeout(function(){
							settime(obj)
						},1000)
					}

				</script>
				<div class="inpGroup">
					<span class="loginIco3"></span>
					<input type="text" name="valid" id="code" placeholder="请输入邮箱验证码" onchange="makeAble()">
				</div>
				<div class="prompt">
					<p class="success">输入正确</p>
				</div>
				
				<!-- <button class="submit">登录</button> -->
				<!-- <a href="scanboard.html" class="animsition-link submit">登录</a> -->
				<!-- <a href="templates/data.html" class="animsition-link submit">登录</a> -->
				<!-- <a href="{{url_for('login')}}" class="animsition-link submit">注册</a> -->
				<input type="submit" class="submit" name="注册" id="registerbtn" disabled="disabled" value="注册">
				<div class="prompt2"></div>
				<a href="{{url_for('login')}}" class="animsition-link submit">登录</a>
			</form>
		</div>
	</div>
	<div id="particles-js"></div>

	<script type ='text/javascript'>
		// 发送邮件
		$(document).ready(function () {
			$('#verify').click(function(){
                email = $("#email").val();
				var sendData = {'email':email};
				$.ajax({
					type:'GET',
					url:'/send_email',
					data:sendData,
					success:function (result) {
						console.log(result.data);
						alert("发送成功！");
					}
				});
			});
		});
    //  检验验证码
		$(document).ready(function () {
			$('#registerbtn').click(function () {
				email = $("#email").val();
				var sendData = {'email':email};
				$.ajax({
					async:true,
					url:"/checkCode",
					type:"post",
					data:sendData,
					success: function(data){
						v = $("#code").val();
						if(data.data.toUpperCase() == v.toUpperCase()){
							alert('验证码正确，若注册成功将跳转到登陆界面');
						}
						else {
							alert('验证码错误!')
						}
					},
				});
			});
		});
	
	</script>

</body>
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/jquery.animsition.js"></script>
<script src="static/js/particles.min.js"></script>
<script src="static/js/app.js"></script>
<script type="text/javascript">
	$(".animsition").animsition({
	    inClass               :   'fade-in',
	    outClass              :   'fade-out',
	    inDuration            :    800,
	    outDuration           :    1000,
	    linkElement           :   '.animsition-link',

	    loading               :    false,
	    loadingParentElement  :   'body',
	    loadingClass          :   'animsition-loading',
	    unSupportCss          : [ 'animation-duration',
	                              '-webkit-animation-duration',
	                              '-o-animation-duration'
	                            ],
	

	    overlay               :   false,
	    
	    overlayClass          :   'animsition-overlay-slide',
	    overlayParentElement  :   'body'
  	});
</script>
</html>
